import router, { asyncRoutes } from './router'
import store from '@/store'
import getPageTitle from './utils/get-page-title'
// 导入进度条插件
import NProgress from 'nprogress'
// 导入进度条样式
import 'nprogress/nprogress.css'

const whiteList = ['/login', '/404'] // 未登录状态下, 应该可以看到404和登录页面

// 全局前置守卫 - 钩子函数
router.beforeEach(async(to, from, next) => {
  NProgress.start() // 显示进度条效果
  const token = store.getters.token
  if (token) { // 登录了
    // 如果加了await, 等待请求完成才能切换路由页面
    // 如果不加await, 先切换路由页面, 网络请求成功, 再去更新getters内name值->也能让页面显示名字
    if (!store.getters.name) {
      const menu = await store.dispatch('user/getUserInfoActions')
      const routeArr = []
      menu.forEach(str => {
        const obj = asyncRoutes.find(item => {
          return item.path === '/' + str
        })
        if (obj !== undefined) {
          routeArr.push(obj)
        }
      })
      router.addRoutes([...routeArr, { path: '*', redirect: '/404', hidden: true }])
      store.commit('permission/setRoutes', [...routeArr, { path: '*', redirect: '/404', hidden: true }])

      setTimeout(() => {
        // 解决: 刷新白屏的问题
        // 动态路由添加完成之后,我们在重定向到本来要去的页面->再次执行路由守卫
        // 刚才动态路由已经添加完毕,所以在跳转一次
        next({
          path: to.path,
          replace: true
        })
      })
    }
    // 想要去登录页 -> 强制给你跳转到首页(已经登录了不让用户看到登录页面, 除非主动退出)
    if (to.path === '/login') {
      next('/')
    } else {
      next()
    }
  } else { // 未登录
    // 需要再次判断-> 如果去登录页也放行,如果别的页面你没登录不能去(打回到登录页)
    // 判断要去的页面路径字符串, 是否在数组里出现过, 是返回true
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
    }
  }
})

// 全局-后置守卫
router.afterEach(() => {
  NProgress.done() // 顶部进度条-隐藏效果关系

  // 切换路由页面, 动态修改浏览器标题
  // 百度: document.title = '标题文字'
  // 已知: (有就直接用, 没有可以自己添加) 路由对象里meta.title
  // router.currentRoute -> 当前路由页面的路由对象
  document.title = getPageTitle(router.currentRoute.meta.title)
})
